<template>
  <div id="app">
    <appbar></appbar>
    <div id="content">
        <topbar></topbar>
        <div id="viewbar">
          <div id="view">
            <router-view></router-view>
          </div>
          <supple-bar></supple-bar>
        </div>
    </div>
  </div>
</template>

<script>
import Appbar from "./Appbar"
import Topbar from "./Topbar"
import SuppleBar from "@/components/global/SuppleBar.vue"

export default {
    components: {
        Appbar,
        Topbar,
        SuppleBar
    }
}
</script>

<style lang="scss">
/* 全局公用样式 */
#app {
  display: flex;
  height: 100vh;
}
#content {
  flex:1;
  display:flex;
  flex-direction: column;
  #viewbar {
    display:flex;
    flex:1;
    #view{
      flex:1;
    }
  }
}
/* 顶部功能bar */
.maintab.v-chip--label{
  border-radius:2px 2px 0 0 !important;
  background: transparent !important;
}
.maintab.tab-selected{
  background:#fff !important;
}

/* 侧边功能bar */
.suppletab .v-btn {
    padding: 16px 0px !important;
    margin-bottom: 1em;
}
.suppletab.tab-selected .v-btn {
  background: #eee8 !important;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar{
    width: 8px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    border-radius: 0;
    background-color: transparent;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 0;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #ccc6;
  }

#FileTree{
  .v-treeview-node__root{
    .v-treeview-node__level,
    .v-icon.v-icon.v-icon--link {
      width:12px !important;
    }
    .v-treeview-node__prepend{
      min-width: 12px !important;
    }
  }
}
</style>
